<template>
    <div class="login-page">
        <navHeader></navHeader>
        <!-- 登录表单 -->
        <van-form @submit="onSubmit">
            <h2 >账号密码登录</h2>
            <van-field left-icon="phone-o" v-model="userPhone" name="userPhone"  placeholder="手机号码"
                :rules="[{ required: true, message: '请填写手机号码' },
                        { validator:vaildatorPhone, message: '手机号码格式不正确' }
                ]" />
            <van-field left-icon="info-o" v-model="userPassword" type="password" name="userPassword" placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { Toast } from 'vant';

export default {
    components: {
        navHeader: () => import("../components/backheader.vue")
    },
    data() {
        return {
            userPhone: '',
            userPassword: '',
        };
    },
    methods: {
        vaildatorPhone(val){
            console.log(val)
            let reg = /^1[3456789]\d{9}$/;
            return reg.test(val)
        },
        // 将手机号和密码存储在浏览器上
        
        //
        onSubmit(values) {
            localStorage.setItem("userInfo",JSON.stringify({
                userPhone:this.userPhone,
                userPassword:this.userPassword
            }))
            this.$toast.success('登录成功');
            setTimeout(()=>{
                this.$router.push('/')
            },1000)
            this.$toast({
                type: 'success',
                message: '登录成功',
                duration: 1000
            })
            console.log('submit', values);
            
        },
    },
}
</script>

<style>
.van-field{
    background: #eee;
    border-radius: 5px;
    margin: 10px 0;
    
}
.van-form{
    padding: 16px;
}
.van-form h2{
    font-size: 16px;
    text-align: center;
    margin-bottom: 32px;
}
</style>
